<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>消息：{{ person.msg }}</h2>
  <h2>城市：{{ person.city }}</h2>
  <button @click="test">触发app的helloMsg</button>
  <br>
  <br>
  <slot name="logo"></slot>
  <slot name="title"></slot>
</template>
<script>
import { reactive } from "vue";
export default {
  name: "Demo",
  // beforeCreate(){
  //   console.log('beforeCreate执行');
  //   console.log(this);
  // },

  props:['msg','city'],
  emits:['hello'],
  setup(props, context) {
    // console.log('setup执行'); //setup执行时机比beforeCreate还要早
    // console.log(this); //undefined
    console.log('props',props);
    // console.log('attrs',context.attrs); //相当于Vue2中$attrs
    // console.log('emit',context.emit); //触发自定义事件
    console.log('slots',context.slots); //插槽

    // 数据
    const person = reactive({
      name: "张三",
      age: 18,
      msg:props.msg,
      city:props.city
    });

    // 方法
    function test(){
      context.emit('hello',person.name) //触发app的自定义事件 @hello
    }


    // 返回一个对象供模版使用
    return {
      person,
      test
    };
  },
};
</script>

